<template>
    <view class="main">
        <view class="item" v-for="item in props.data" :key="item.id"
            @click="$goUrl(`/subPackage/index/projectOrderDetail?id=${item.id}`)">
            <view class="order-no dispaly-just-between">
                <view class="left dispaly-center">
                    <view class="line"></view>
                    <view class="no">订单编号：{{ item.orderNo }}</view>
                </view>
                <view class="right" v-if="item.status == 0">待付款</view>
                <view class="right" v-if="item.status == 1">待施工</view>
                <view class="right" v-if="item.status == 2">进行中</view>
                <view class="right" v-if="item.status == 3">已完工</view>
                <view class="right" v-if="item.status == 4">已取消</view>
            </view>
            <view class="pro dispaly-center">
                <view class="pro-left">
                    <image :src="item.image" mode="aspectFill" />
                </view>
                <view class="pro-right">
                    <view class="t dispaly-just-between">
                        <view class="name">{{ item.serviceName }}</view>
                        <view class="num">×{{ item.num }}</view>
                    </view>
                    <view class="spec">规格选择：{{ item.specName }}</view>
                    <view class="price">￥{{ item.totalMoney }}</view>
                </view>
            </view>
            <view class="time-box">
                <view class="items dispaly-center">
                    <view class="lefts">创建时间：</view>
                    <view class="rights">{{ item.createTime }}</view>
                </view>
                <view class="items dispaly-center" v-if="item.status == 1 || item.status == 2">
                    <view class="lefts" v-if="item.payTime">交易时间：</view>
                    <view class="rights" v-if="item.payTime">{{ item.payTime }}</view>
                </view>
            </view>
            <view class="pay" v-if="item.status == 0">
                <view class="btn dispaly-align-center" @click.stop="payment(item.id)">支付</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { pay } from '@/api/apiList'
import { debounce } from '@/utils/util'
const props = defineProps({
    data: Array
})

const emit = defineEmits(['status'])

// 支付
const payment = debounce(async (id) => {
    uni.showLoading({
        title: '加载中',
    })
    const res = await pay(id)
    if (res.code == 200) {
        const { appId, nonceStr, packageVal, paySign, signType, timeStamp } = res.data
        uni.requestPayment({
            provider: 'wxpay',
            timeStamp,
            nonceStr,
            package: packageVal,
            signType,
            paySign,
            success: (res) => {
                if (res.errMsg == 'requestPayment:ok') {
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    uni.hideLoading()
                    emit('status', 2)
                }
            },
            fail: (err) => {
                uni.hideLoading()
                uni.showToast({
                    title: '您取消了支付',
                    icon: 'none'
                })
            }
        })
        uni.hideLoading()
        console.log(res, 'reeeeeeee')
        show.value = false
    }
}, 1500, true)
</script>
<style lang="scss" scoped>
.main {

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 30rpx 24rpx;
        margin-bottom: 16rpx;

        .order-no {
            border-bottom: 1rpx solid #eee;
            padding-bottom: 20rpx;

            .left {
                .line {
                    width: 8rpx;
                    height: 24rpx;
                    background: radial-gradient(#FB4E47 0%, #FFFFFF 100%);
                    border-radius: 4rpx;
                    margin-right: 10rpx;
                }

                .no {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #111111;
                }
            }

            .right {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #111111;
            }
        }

        .pro {
            margin-top: 30rpx;

            .pro-left {
                margin-right: 20rpx;

                image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 16rpx;
                }
            }

            .pro-right {
                width: 100%;

                .t {
                    .name {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #111111;
                    }

                    .num {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #111111;
                    }
                }

                .spec {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #666666;
                    margin: 20rpx 0 30rpx 0;
                }

                .price {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FB4E47;
                }
            }
        }

        .pay {
            margin-top: 20rpx;
            display: flex;
            justify-content: flex-end;

            .btn {
                width: 160rpx;
                height: 60rpx;
                background: #FB4E47;
                border-radius: 30rpx 30rpx 30rpx 30rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #FEFFFF;
            }
        }

        .time-box {
            margin-top: 20rpx;
            padding-bottom: 15rpx;
            border-bottom: 1rpx solid #eee;

            .items:first-child {
                margin-bottom: 15rpx;
            }

            .items {
                .lefts {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #999999;
                }

                .rights {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #111111;
                }
            }
        }
    }
}
</style>